<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { PhArrowLeft, PhImage, PhCalendar } from '@phosphor-icons/vue';
import VueEasyLightbox from 'vue-easy-lightbox';
import MasonryWall from '@yeger/vue-masonry-wall';

interface Photo {
  id: string;
  url: string;
  description: string;
  createTime: string;
}

interface AlbumDetail {
  id: string;
  title: string;
  description: string;
  createTime: string;
  photos: Photo[];
}

const route = useRoute();
const router = useRouter();
const albumId = route.params.id as string;

const album = ref<AlbumDetail | null>(null);
const loading = ref(true);

// 图片预览相关
const visibleRef = ref(false);
const indexRef = ref(0);

// 打开预览
const showImg = (index: number) => {
  indexRef.value = index;
  visibleRef.value = true;
};

// 获取相册详情
const fetchAlbumDetail = async () => {
  try {
    loading.value = true;
    // TODO: 调用API获取相册详情
    // const { data } = await getAlbumDetail(albumId);
    // album.value = data;

    // 模拟数据
    await new Promise(resolve => setTimeout(resolve, 1000));
    album.value = {
      id: albumId,
      title: '青春记忆',
      description: '大学时光的点点滴滴',
      createTime: '2024-01-15',
      photos: [
        {
          id: '1',
          url: 'http://117.72.118.161:9400/blog/article-cover/0d8ad4f9-1723-44fe-a085-8da78345a731.webp',
          description: '毕业典礼',
          createTime: '2024-01-15'
        },
        {
          id: '2',
          url: 'http://117.72.118.161:9400/blog/article-cover/0228b46a-3cdc-4787-a1ed-2ae051fd63b5.webp',
          description: '毕业典礼',
          createTime: '2024-01-15'
        },
        {
          id: '3',
          url: 'http://117.72.118.161:9400/blog/background/fd173df3-9b60-41b6-9cb5-570ac93893f9.jpg',
          description: '毕业典礼',
          createTime: '2024-01-15'
        },
        {
          id: '4',
          url: 'http://117.72.118.161:9400/blog/background/fd173df3-9b60-41b6-9cb5-570ac93893f9.jpg',
          description: '毕业典礼',
          createTime: '2024-01-15'
        },
        {
          id: '5',
          url: 'http://117.72.118.161:9400/blog/background/fd173df3-9b60-41b6-9cb5-570ac93893f9.jpg',
          description: '毕业典礼',
          createTime: '2024-01-15'
        },
        {
          id: '6',
          url: 'http://117.72.118.161:9400/blog/article-cover/0228b46a-3cdc-4787-a1ed-2ae051fd63b5.webp',
          description: '毕业典礼',
          createTime: '2024-01-15'
        },
        // ... 其他照片
      ]
    };
  } catch (error) {
    console.error('获取相册详情失败:', error);
  } finally {
    loading.value = false;
  }
};

const goBack = () => {
  router.push('/albums');
};

onMounted(() => {
  fetchAlbumDetail();
});
</script>

<template>
  <div class="album-detail-page">
    <div class="container">
      <!-- 返回按钮 -->
      <button class="back-button" @click="router.back()">
        <PhArrowLeft :size="20" />
        <span>返回相册列表</span>
      </button>

      <!-- 相册头部信息 -->
      <div class="album-header">
        <div class="album-color-bar"></div>
        <div class="album-header-content">
          <h1 v-if="album">{{ album.title }}</h1>
          <h1 v-else class="title-skeleton"></h1>

          <p v-if="album" class="album-description">{{ album.description }}</p>
          <p v-else class="desc-skeleton"></p>

          <div v-if="album" class="album-meta">
            <div class="meta-item">
              <PhImage :size="18" />
              <span>{{ album.photos.length }} 张照片</span>
            </div>
            <div class="meta-item">
              <PhCalendar :size="18" />
              <span>创建于 {{ album.createTime }}</span>
            </div>
          </div>
          <div v-else class="meta-skeleton"></div>
        </div>
      </div>

      <!-- 照片瀑布流 -->
      <div class="photos-container">
        <MasonryWall v-if="album && album.photos.length > 0"
                     :items="album.photos"
                     :column-width="280"
                     :gap="16"
                     class="photos-wall">
          <template #default="{ item, index }">
            <div class="photo-card" @click="showImg(index)">
              <div class="photo-image">
                <img :src="item.url" :alt="item.description">
              </div>
              <div class="photo-info">
                <p v-if="item.description" class="photo-description">{{ item.description }}</p>
                <span class="photo-date">{{ item.createTime }}</span>
              </div>
            </div>
          </template>
        </MasonryWall>

        <!-- 骨架屏 -->
        <div v-else-if="loading" class="skeleton-container">
          <div v-for="i in 6" :key="i" class="skeleton-photo"
               :style="{ height: `${200 + Math.floor(Math.random() * 150)}px` }">
          </div>
        </div>

        <!-- 无照片提示 -->
        <div v-else class="empty-photos">
          <PhImage :size="48" weight="light" />
          <p>该相册暂无照片</p>
        </div>
      </div>
    </div>

    <!-- 图片预览 -->
    <VueEasyLightbox
      :visible="visibleRef"
      :imgs="album?.photos.map(photo => photo.url) || []"
      :index="indexRef"
      @hide="visibleRef = false"
    />
  </div>
</template>

<style scoped lang="less">
.album-detail-page {
  padding-top: 60px;
  width: 100%;
  overflow-x: hidden; /* 防止水平滚动 */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* 修复照片容器溢出问题 */
.photos-container {
  width: 100%;
  overflow: hidden; /* 确保内容不会溢出 */
}

.photos-wall {
  width: 100%; /* 确保瀑布流填充容器宽度 */
}

/* 其他样式保持不变 */
.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #1e293b;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 30px;
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.back-button:hover {
  background-color: #f8fafc;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.album-header {
  background-color: white;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  margin-bottom: 40px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.5s ease;
}

.album-color-bar {
  height: 6px;
  background: linear-gradient(90deg, #6366f1, #3b82f6, #0ea5e9);
}

.album-header-content {
  padding: 32px;
}

.album-header-content h1 {
  margin: 0 0 16px;
  font-size: 28px;
  color: #1e293b;
  font-weight: 600;
}

.album-description {
  margin: 0 0 24px;
  font-size: 16px;
  color: #64748b;
  line-height: 1.6;
}

.album-meta {
  display: flex;
  gap: 24px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 14px;
}

/* 照片卡片样式 */
.photo-card {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.photo-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.photo-image {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.photo-image img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.photo-card:hover .photo-image img {
  transform: scale(1.05);
}

.photo-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.photo-card:hover .photo-info {
  opacity: 1;
}

.photo-description {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.photo-date {
  font-size: 12px;
  opacity: 0.8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 空状态 */
.empty-photos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #94a3b8;
  text-align: center;
}

.empty-photos p {
  margin-top: 16px;
  font-size: 16px;
}

/* 骨架屏 */
.title-skeleton, .desc-skeleton, .meta-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

.title-skeleton {
  height: 32px;
  width: 60%;
  margin-bottom: 16px;
}

.desc-skeleton {
  height: 16px;
  width: 80%;
  margin-bottom: 24px;
}

.meta-skeleton {
  height: 20px;
  width: 40%;
}

.skeleton-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
}

.skeleton-photo {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 12px;
}

/* 动画 */
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .album-detail-page {
    padding: 40px 0;
  }

  .container {
    padding: 0 16px;
  }

  .back-button {
    padding: 8px 16px;
    margin-bottom: 24px;
  }

  .album-header {
    margin-bottom: 30px;
  }

  .album-header-content {
    padding: 24px;
  }

  .album-header-content h1 {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .album-description {
    font-size: 15px;
    margin-bottom: 20px;
  }

  .album-meta {
    gap: 16px;
  }

  .meta-item {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .album-detail-page {
    padding: 24px 0;
  }

  .album-header-content {
    padding: 20px;
  }

  .album-header-content h1 {
    font-size: 22px;
  }

  .album-description {
    font-size: 14px;
  }

  .album-meta {
    flex-direction: column;
    gap: 12px;
  }

  .skeleton-container {
    grid-template-columns: 1fr;
  }
}
</style>
